<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>网格布局</title>
    <style>
        .outer{
            display: grid;
            border: 4px orange solid;
            grid-gap: 10px;
            /*
                minmax(最小值, 最大值)
                    - 用来设置行和列的大小
                    - 可选值：
                        像素、auto、min-content、max-content

                repeat()
                    - 自动重复设置行和列
                    - 第一个值：
                        auto-fill 自动计算列，尽可能多的生成列
                        auto-fit 自动计算列，尽量让列可以容纳下所有元素
            */
            /*grid-template-columns: 100px 200px minmax(auto, min-content);*/
            grid-template-columns: repeat(auto-fit, minmax(50px, auto));
            grid-auto-rows: minmax(200px, auto);


        }

        .outer div{
            border: 4px red solid;
        }


    </style>
</head>
<body>

<div class="outer">
    <div class="box1">box1</div>
    <div class="box2">box2</div>
    <div class="box3">
        box3
    </div>
    <div class="box4">box4</div>
    <div class="box5">box5</div>
    <div class="box6">box6</div>
    <div class="box7">box7</div>
    <div class="box8">box8</div>
    <div class="box9">box9</div>
    <div class="box10">box10</div>
    <div class="box11">box11</div>
    <div class="box12">box12</div>
</div>

</body>
</html>